<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>ValidationAide - Simple</title>
	<link href="_client/styles/master.css" media="screen,projection" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="_client/scripts/jquery/jquery.js"></script>
	<script type="text/javascript" src="_client/scripts/jquery/stringaide.js"></script>
	<script type="text/javascript" src="_client/scripts/jquery/validationaide.js"></script>
	<script type="text/javascript">
		jQuery.noConflict(); var $j = jQuery;
		
		$j(document).ready(function() {
			$j("#TestForm").validationAideEnable();
		});
	</script>
</head>
<body>

<h1>ValidationAide - Custom Messages</h1>

<p>You can override the default message displayed when a field fails a validation rule e.g. title="First name - Custom first name message". ValidationAide will split the title at the " - ", the first part being the field friendly name, the second the custom message displayed whenever the field fails a validation rule.</p>
<h3>Remember!</h3>
<p>You can override the message separator by settings "fieldMessageSeparator" e.g. $("#TestForm").validationAideEnable(null, {fieldMessageSeparator: " # "});</p>

<form id="TestForm">
	
	<div id="ClientValidationSummary"></div>
	
	<label for="FirstName" id="FirstNameLabel">
		<span class="label">First name: <span class="required">*</span></span>
		<input type="text" id="FirstName" title="First name - Custom first name message" class="textbox validator-required" />
	</label>
	
	<label for="Surname">
		<span class="label">Surname: <span class="required">*</span></span>
		<input type="text" id="Surname" title="Surname - Another custom message" class="textbox validator-required" />
	</label>
	
	<label for="Email">
		<span class="label">Email: <span class="required">*</span></span>
		<input type="text" id="Email" class="textbox validator-required validator-email" />
	</label>
	
	<label for="Company">
		<span class="label">Company:</span>
		<input type="text" id="Company" class="textbox" />
	</label>
	
	<label for="HasReadTerms">
		<span class="label">Read Terms?</span>
		<input type="checkbox" id="HasReadTerms" title="Read Terms?" class="checkbox validator-required" />
	</label>
	
	<div class="toolbar">
		<input type="submit" value="Submit" />
	</div>
	
</form>

</body>
</html>